<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>注册界面</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/register.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pagination.css">
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/pagination.js"></script>
    <script src="${pageContext.request.contextPath}/js/my.js"></script>
</head>
<%--
TODO
这个界面都可以修改，但 UI风格要与其他的界面统一

--%>
<body>

<div class="box-header with-border">
    <h3 class="box-title">用户管理</h3>
</div>

<span style="color: red">${msg}</span>

<%--新增按钮：如果当前登录用户是管理员，页面展示新增按钮--%>
<c:if test="${USER_SESSION.role =='ADMIN'}">
    <div class="pull-left">
        <div class="form-group form-inline">
            <div class="btn-group">
                <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                        data-target="#addOrEditModal" onclick="resetFrom()"> 新增
                </button>
            </div>
        </div>
    </div>
</c:if>
<c:if test="${USER_SESSION.role =='ADMIN'}">

    <div class="box-tools pull-right">
        <div class="has-feedback">
                <%--
                    条件查询，通过用户邮箱和用户名搜索（模糊查询）

                --%>
            <form action="${pageContext.request.contextPath}/searchUsers">
                用户名：<input name="name" value="${search.name}">&nbsp&nbsp&nbsp&nbsp
                用户邮箱：<input name="email" value="${search.email}">&nbsp&nbsp&nbsp&nbsp
                <input class="btn btn-default" type="submit" value="查询">
            </form>
        </div>
    </div>

</c:if>


<div class="table-box">
    <!-- 数据表格 -->
    <table id="dataList"
           class="table table-bordered table-striped table-hover dataTable text-center">

        <thead>
        <tr>
            <th class="sorting">用户名</th>
            <th class="sorting">用户邮箱</th>
            <c:if test="${USER_SESSION.role =='ADMIN'}">
                <th class="sorting">用户密码</th>
            </c:if>
            <c:if test="${USER_SESSION.role =='ADMIN'}">
                <th class="sorting">用户角色</th>
            </c:if>

            <th class="text-center">操作</th>
        </tr>
        </thead>

        <tbody>
        <c:forEach items="${pageResult.rows}" var="user">
            <tr>
                <td>${user.name}</td>
                <td>${user.email}</td>
                <c:if test="${USER_SESSION.role =='ADMIN'}">

                    <td>
                            ${user.password}
                    </td>
                </c:if>
                <c:if test="${USER_SESSION.role =='ADMIN'}">

                    <td>
                        <c:if test="${user.role =='ADMIN'}">管理员</c:if>
                        <c:if test="${user.role =='USER'}">用&nbsp户</c:if>
                    </td>
                </c:if>

                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal"
                            data-target="#addOrEditModal" onclick="findUserById(${user.id},'edit')"> 编辑
                    </button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <!--数据表格/-->
    <%--分页插件--%>
    <div id="pagination" class="pagination"></div>
</div>


</body>
<!-- 添加和编辑图书的模态窗口 -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="myModalLabel">用户信息</h3>
            </div>
            <div class="modal-body">
                <form id="addOrEditBook">
                    <span><input type="hidden" id="userid" name="id"></span>
                    <table id="addOrEditTab" class="table table-bordered table-striped" width="800px">
                        <%--用户的id,不展示在页面--%>
                        <tr>
                            <td>用户名称</td>
                            <td><input class="form-control" placeholder="用户名称" name="name" id="name"></td>
                            <td>用户密码</td>
                            <td><input class="form-control" placeholder="用户密码" name="password" id="password"></td>
                        </tr>
                        <tr>
                            <td>用户邮箱</td>
                            <td><input class="form-control" placeholder="用户邮箱" name="email" id="email"></td>
                            <td>用户状态</td>
                            <td>
                                <select class="form-control" id="status" name="status" >
                                    <option value="0">正常</option>
                                    <option value="1">禁用</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>用户角色</td>
                            <td>
                                <select class="form-control" id="role" name="role" >
                                    <c:if test="${USER_SESSION.role =='ADMIN'}">
                                        <option value="ADMIN">ADMIN</option>
                                    </c:if>
                                    <option value="USER">USER</option>
                                </select>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" id="aoe" disabled onclick="addOrEdit()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    function findUserById(id,doname) {
        resetStyle()
        var url = getProjectPath()+"/findById?id=" + id;
        $.get(url, function (response) {
            //如果是编辑图书，将获取的图书信息回显到编辑的窗口中
            if(doname=='edit'){
                $("#userid").val(response.data.id);
                $("#name").val(response.data.name);
                $("#password").val(response.data.password);
                $("#email").val(response.data.email);
                $("#status").val(response.data.status);
                $("#role").val(response.data.role);
            }
        })
    }


    //点击添加或编辑的窗口的确定按钮时，提交图书信息
    function addOrEdit() {
        //获取表单中用户id的内容
        var userid = $("#userid").val();
        //如果表单中有用户id的内容，说明本次为编辑操作
        if (userid > 0) {
            var url = getProjectPath()+"/editUser";
            $.post(url, $("#addOrEditBook").serialize(), function (response) {
                alert(response.message)
                if (response.success == true) {
                    window.location.href = getProjectPath()+"/searchUsers";
                }
            })
        }
        //如果表单中没有图书id，说明本次为添加操作
        else {
            var url = getProjectPath()+"/addUser";
            $.post(url, $("#addOrEditBook").serialize(), function (response) {
                alert(response.message)
                if (response.success == true) {
                    window.location.href = getProjectPath()+"/searchUsers";
                }
            })
        }
    }
</script>

</html>